<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery.tools.js"></script>	
		<script type="text/javascript" src="lib/jquery.custom.js"></script>
		
		<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" />


<!-- Pirobox setup and styles end-->

</head>
<body>


<div id="main">
<!-- header begins -->
<div id="header">
	<div id="logo">
    	<a href="#">metamorph_melancholy</a>
      	<h2><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h2>
    </div>
    <div id="buttons">
      <a href="index.html" class="but"  title="">Home</a>
      <a href="about_us.html" class="but" title="">About Us</a>
      <a href="gallery.html"  class="but" title="">Gallery</a>
      <a href="blog.html"  class="but" title="">Blog</a>
      <a href="contact_us.html" class="but" title="">Contact us</a>
    </div>
</div>
<!-- header ends -->

<!-- content begins --> 

  <div id="content">
    	
			<div class="scrollable">
				<div class="items">
					<div class="item">
						<div class="header1"></div>                                    
					</div> <!-- item -->
					<div class="item">
					    <div class="header2"></div>						
					</div> <!-- item -->
					<div class="item">
					    <div class="header3"></div>						
					</div> <!-- item -->			
											
					
				</div> <!-- items -->
			</div> <!-- scrollable -->
			<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->		   
			  
                <div style="clear: both"></div>
			
		
            
        <div style="height:10px"></div>
        <div class="row">
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big1.jpg"  class="pirobox_gal1" title="1st Project Image"><img src="images/img31.jpg" alt="" / height="123"></a></div>	
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big2.jpg" class="pirobox_gal1" title="2nd Project Image"><img src="images/img32.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big3.jpg" class="pirobox_gal1"  title="3rd Project Image"><img src="images/img33.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
        	<div style="clear: both; height: 1px;"></div> 
        </div> 
        <div style="height: 14px;"></div>
        <div class="row">
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big4.jpg" class="pirobox_gal1" title="4th Project Image"><img src="images/img34.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big5.jpg" class="pirobox_gal1" title="5th Project Image"><img src="images/img35.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big6.jpg" class="pirobox_gal1" title="6th Project Image"><img src="images/img36.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
        	<div style="clear: both; height: 1px;"></div> 
        </div> 
        <div style="height: 14px;"></div>
        <div class="row">
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big7.jpg" class="pirobox_gal1" title="7th Project Image"><img src="images/img37.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big8.jpg" class="pirobox_gal1"  title="8th Project Image"><img src="images/img38.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
            <div class="box_razd"></div>
            <div class="box_img2">
                <div class="img_height"><a href="images/gallery_big9.jpg" class="pirobox_gal1"  title="9th Project Image"><img src="images/img39.jpg" alt="" /></a></div>
                <h3>New Title</h3>
                <div class="box_img2_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit 
                </div>
          	</div>
        	<div style="clear: both; height: 1px;"></div> 
        </div> 
        <div style="height: 14px;"></div>
         <div style="height:24px">
                <a class="gal_num" href="#">1</a>
                <a class="gal_num" href="#">2</a>
                <a class="gal_num" href="#">3</a>
            </div>   
        <div style="clear: both; height: 4px;"></div>                  
  </div>
        <!-- content ends -->
<div style="height: 7px;"></div> 
        <!-- bottom begin -->
<div class="cont_top"></div>
    <div id="bottom">
    <div class="bottom_h2">	
    <div class="bottom_razd">   
        <div class="b_col1">
            <h2>Contact Information</h2>
            <div style="height:25px"></div>
            <b>Suspendisse rutrum interdum lacinia.</b> Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor <br />
            <br />
            <b>Quisque luctus, mi ornare</b> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo    
      </div>
        <div class="b_col2">
            <h2>Share with Others</h2>
            <div style="height:25px"></div>
            <ul>
                <li><img src="images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
                <li><img src="images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
                <li><img src="images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
                <li><img src="images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
            </ul>
        </div>
      <div class="b_col3">
            <h2>Useful Resources</h2>
            <div style="height:25px"></div>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas in turpis </a></li>
                <li><a href="#">Morbi fringilla libero</a></li>
                <li><a href="#">In venenatis metus vel </a></li>
                <li><a href="#">Donec cursus quam ac </a></li>
            </ul>
      </div> 
      <div style="clear: both; height:1px;"></div>
    </div>  
    </div>
    </div>
 
    
<!-- bottom end --> 
<!-- footer begins -->
            <div id="footer">
          Copyright  2011. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
                <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></div>
        <!-- footer ends -->
</div>



</body>
</html>
